<script setup>
// ref：让数据具备响应式,需要加 .value
// reactive：让引用类型的数据具备响应式，不需要加 .value
// readonly: 只读的数据，当值改变的时候会有一个提示
// computed: 计算属性
// watch: 侦听器
// watchEffect: 类似于计算属性的侦听器，不需要返回值，写在里面的变化都会被监听到
// onWatcherCleanup：清除副作用的函数
import { onMounted, onBeforeMount, onUpdated, onBeforeUpdate, onUnmounted, onBeforeUnmount } from 'vue'

// 在组合式 API 中 setup 会代替 创建之前和创建完成
onBeforeMount(() => {
    console.log('生命周期执行的函数');
})
onMounted(() => {
    console.log('生命周期执行的函数');
})
onUpdated(() => {
    console.log('生命周期执行的函数');
})

</script>

<template>
    <h1>组合式 API</h1>
    <h2>

    </h2>
    <!-- <button @click="price++">修改</button> -->

</template>
